/* eslint-disable react/prop-types */
import { Modal, Typography } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryAdjustList } from "@/api/member"
import { IMemberList } from "@/api/member/types"
import { IMemberParams } from "@/api/risk/types"
import { DataList } from "@/components/common"
import { usePagination } from "@/hooks"
import { FormatMessageProps, useLocale } from "@/locales"

import { StyleModalLabel } from "../styles"

interface ICheckTheDetailModalProps {
	value: string
	data: IMemberParams
}

export const CheckTheDetailModal: React.FC<ICheckTheDetailModalProps> = ({ value, data }) => {
	const [isModalOpen, setIsModalOpen] = useState(false)
	const [dataTable, setDataTable] = useState({} as IMemberList)
	const { formatMessage } = useLocale()
	const { pagination, onPageChange } = usePagination(100)

	const handleFetchData = useCallback(async () => {
		const body = {
			merchantId: data.merchantId,
			userId: data.userId,
			...pagination
		}
		const [err, adjustListRes] = await queryAdjustList(body)
		if (!err) setDataTable(adjustListRes)
	}, [data])

	useEffect(() => {
		handleFetchData()
	}, [handleFetchData])

	return (
		<StyleModalLabel>
			<Typography className="text-primary" onClick={() => setIsModalOpen(true)}>
				{value}
			</Typography>
			<Modal
				footer={null}
				centered
				title={null}
				onCancel={() => {
					setIsModalOpen(false)
				}}
				open={isModalOpen}
			>
				<DataList
					maxHeight="300px"
					data={dataTable.record}
					columns={columnsAdjustList(formatMessage)}
					bordered
					pagination={{
						pageSize: dataTable.pageSize,
						current: dataTable.pageNum,
						total: dataTable.totalRecord,
						showSizeChanger: true
					}}
					onChange={onPageChange}
				/>
			</Modal>
		</StyleModalLabel>
	)
}
export const columnsAdjustList = (formatMessage: FormatMessageProps) => [
	{
		dataIndex: "adjustment_amount",
		title: formatMessage({ id: "label.report.adjustment_amount" }),
		render: (value: any, record: any) => <p className="text-game">{record.adjustment_amount}</p>,
		width: 150,
		align: "center",
		key: "adjustment_amount"
	},
	{
		dataIndex: "adjust_the_time",
		title: formatMessage({ id: "label.report.adjust_the_time" }),
		render: (value: any, record: any) => <p className="text-game">{record.adjust_the_time}</p>,
		width: 150,
		align: "center",
		key: "adjust_the_time"
	},
	{
		dataIndex: "adjust_the_operator",
		title: formatMessage({ id: "label.report.adjust_the_operator" }),
		render: (value: any, record: any) => <p className="text-game">{record.adjust_the_operator}</p>,
		width: 150,
		align: "center",
		key: "adjust_the_operator"
	}
]
